<script setup lang="ts">
//营造令海报
import { onMounted } from "vue";
import { useWindowSize } from "@vant/use";
import H5Typewriter from "../../components/my/H5Typewriter.vue";

import AOS from "aos";

const { width, height } = useWindowSize();

onMounted(() => {
  AOS.init();
});
const tapPullup = (index: number) => {
  window.scrollTo({
    left: 0,
    top: height.value * index,
    behavior: "smooth",
  });
};
</script>

<template>
  <div class="page" :style="{ height: height + 'px', width: width + 'px' }">
    
    <div class="home">
        <H5Typewriter text="自由选择，改变未来" />
    </div>
    <div class="down-icon">
      <span
        @click="tapPullup(1)"
        class="icondemo demo-icon-arrow-bottom2 down-icon-span"
      ></span>
    </div>
  </div>
  <div class="page" :style="{ height: height + 'px', width: width + 'px' }">
    <div class="model">
      <img class="image-left" data-aos="fade-right" src="../../assets/guide/2208-1.jpg" alt="" />
      <img class="image-right" data-aos="fade-left" src="../../assets/guide/2208-2.jpg" alt="" />
    </div>
    <div class="model">
      <img class="image-left" data-aos="fade-up-right" src="../../assets/guide/2208-3.jpg" alt="" />
      <img class="image-right" data-aos="fade-up-left" src="../../assets/guide/2208-4.jpg" alt="" />
    </div>
    <div class="down-icon">
      <span
        @click="tapPullup(2)"
        class="icondemo demo-icon-arrow-bottom2 down-icon-span"
      ></span>
    </div>
  </div>
  <div class="page" :style="{ height: height + 'px', width: width + 'px' }">
    <div>3</div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  background: #122c9a;
  position: relative;
  overflow: hidden;

  .home{
      font-size: 18px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 120px;
      width: 375px;
  }

  .model {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .image-left,.image-right{
        width: 140px;
        height: 260px;
    }
  }

  .down-icon {
    position: absolute;
    bottom: 40px;
    width: 375px;
    display: flex;
    justify-content: center;
    color: #c0c4cc;

    .down-icon-span {
      font-size: 24px;
      animation: pulse 2s infinite;
    }
  }
}

@keyframes pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>
